<template>
  <el-row>
    <el-col :span="23" class="title">{{ title }}</el-col>
    <el-col :span="1" class="title">
      <i class="el-icon-info"></i>
    </el-col>
    <el-col :span="24" class="price">
      <span>{{ count }}</span>
    </el-col>
    <el-col :span="24" class="container">
      <slot name="container"></slot>
    </el-col>
    <el-col :span="24">
      <slot name="footer" class="footer"></slot>
    </el-col>
  </el-row>
</template>

<script>
export default {
  name: "Detail",
  props: ["title", "count"]
};
</script>

<style lang="scss" scoped>
.title {
  font-size: 16px;
  font-weight: 500;
  color: gainsboro;
  i {
    font-weight: 600;
  }
}
.price {
  span {
    font-size: 36px;
    font-weight: 700;
  }
}
.container {
  height: 60px;
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  padding-bottom: 10px;
  font-size: 12px;
  margin-bottom: 5px;
  border-bottom: 1px solid rgb(243, 235, 235);
}
.footer {
  span {
    font-size: 16px;
  }
}
</style>
